import { CalendarPicker, Picker, Space } from 'antd-mobile'
import { FC, useEffect, useState } from 'react'
import type { PickerColumn } from 'antd-mobile/es/components/picker'
import { DownOutline, CloseCircleFill } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import CustomPicker from './CustomPicker'

interface CustomCalendarPickerProps {
    request?: any
    value?: any
    onChange?: any
    title?: any
    customColumns?: any
}

const defaultTime = dayjs()

const genTimeColumns = () => {
    const res = []
    const hours = []
    const minus = []
    const seconds = []
    for (let index = 0; index <= 23; index++) {
        const map = {
            label: index < 10 ? '0' + index : index,
            value: index
        }
        hours.push(map)
    }
    for (let index = 0; index <= 59; index++) {
        const map = {
            label: index < 10 ? '0' + index : index,
            value: index
        }
        minus.push(map)
    }
    for (let index = 0; index <= 59; index++) {
        const map = {
            label: index < 10 ? '0' + index : index,
            value: index
        }
        seconds.push(map)
    }
    res.push(hours)
    res.push(minus)
    res.push(seconds)
    return res
}

const CustomCalendarPicker: FC<CustomCalendarPickerProps> = ({
    request,
    value,
    onChange,
    title,
    customColumns,
}) => {
    const [visible, setVisible] = useState(false)
    const [time, setTime] = useState<any[]>([])

    const onClear = (e: any) => {
        e.stopPropagation()
        onChange?.()
    }

    useEffect(() => {
        if (value) {
            setTime([+dayjs(value).format('HH'), +dayjs(value).format('mm'), +dayjs(value).format('ss')])
        } else {
            const hours = dayjs(defaultTime).get('hours')
            const minutes = dayjs(defaultTime).get('minutes')
            const seconds = dayjs(defaultTime).get('seconds')
            setTime([hours, minutes, seconds])
        }
    }, [])

    return <>
        <div onClick={() => setVisible(true)} style={{ fontSize: 17, width: '100%' }}>
            {value ? <Space align='center' justify='between' style={{ width: '100%' }}>
                {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
                <CloseCircleFill style={{ color: '#ccc', fontSize: 16 }} onClick={(e) => onClear(e)} />
            </Space> : <Space align='center' justify='between' style={{ color: '#ccc', width: '100%' }}>
                <div>请选择</div>
                <DownOutline />
            </Space>}
        </div>

        <CalendarPicker
            visible={visible}
            title={<>
                <CustomPicker
                    title={'时间'}
                    customColumns={genTimeColumns()}
                    customChildRender={(items: any) => {
                        if (items.every((item: any) => item === null)) {
                            return value ? dayjs(value).format("HH:mm:ss") : defaultTime.format("HH:mm:ss")
                        }
                        return <>
                            {items.map((item: any) => item?.label ?? '请选择').join(':')}
                        </>
                    }}
                    value={time}
                    onChange={(val: any) => {
                        setTime(val)
                        const newVal = dayjs(value)
                        onChange?.(new Date(newVal.format(`YYYY-MM-DD ${val[0]}:${val[1]}:${val[2]}`)))
                    }}
                />
            </>}
            selectionMode='single'
            value={value}
            onChange={val => {
                if (time?.length) {
                    const newVal = new Date(dayjs(val).format(`YYYY-MM-DD ${time[0]}:${time[1]}:${time[2]}`))
                    onChange?.(newVal)
                } else {
                    onChange?.(val)
                }
            }}
            onClose={() => setVisible(false)}
            onMaskClick={() => setVisible(false)}
        />
    </>
}

export default CustomCalendarPicker